21. august 2025Eesti

Avastage Reacti useReducer hook keeruka oleku haldamiseks. See juhend käsitleb täiustatud mustreid, jõudluse optimeerimist ja reaalseid näiteid arendajatele üle maailma.

React useReducer: keerukate olekuhaldusmustrite valdamine

Reacti useReducer hook on võimas tööriist keeruka oleku haldamiseks teie rakendustes. Erinevalt useState'ist, mis sobib sageli lihtsamate olekuvärskenduste jaoks, paistab useReducer silma just siis, kui tegemist on keerulise olekuloogika ja värskendustega, mis sõltuvad eelmisest olekust. See põhjalik juhend süveneb useReducer'i keerukustesse, uurib täiustatud mustreid ja pakub praktilisi näiteid arendajatele üle maailma.

useReducer'i põhitõdede mõistmine

Oma olemuselt on useReducer olekuhaldusvahend, mis on inspireeritud Reduxi mustrist. See võtab kaks argumenti: redutseerija funktsiooni ja algoleku. Redutseerija funktsioon tegeleb olekumuutustega, mis põhinevad saadetud tegevustel (actions). See muster soodustab puhtamat koodi, lihtsamat silumist ja prognoositavaid olekuvärskendusi, mis on oluline igas suuruses rakenduste jaoks. Vaatame komponente lähemalt:

Redutseerija funktsioon: See on useReducer'i süda. See võtab sisendiks praeguse oleku ja tegevusobjekti ning tagastab uue oleku. Tegevusobjektil on tavaliselt type omadus, mis kirjeldab sooritatavat tegevust, ja see võib sisaldada payload'i lisandmetega.
Algolek: See on teie rakenduse oleku alguspunkt.
Dispatch-funktsioon: See funktsioon võimaldab teil käivitada olekuvärskendusi tegevuste saatmisega. Dispatch-funktsiooni pakub useReducer.

Siin on lihtne näide, mis illustreerib põhistruktuuri:

            
import React, { useReducer } from 'react';

// Redutseerija funktsiooni defineerimine
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // useReducer'i lähtestamine
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Suurenda</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Vähenda</button>
    </div>
  );
}

export default Counter;

Selles näites tegeleb redutseerija funktsioon suurendamise ja vähendamise tegevustega, uuendades `count` olekut. dispatch-funktsiooni kasutatakse nende olekumuutuste käivitamiseks.

useReducer'i täiustatud mustrid

Kuigi useReducer'i põhimuster on lihtne, ilmneb selle tõeline jõud siis, kui hakkate tegelema keerulisema olekuloogikaga. Siin on mõned täiustatud mustrid, mida kaaluda:

1. Keerulised tegevuste payload'id

Tegevused ei pea olema lihtsad stringid nagu 'increment' või 'decrement'. Nad võivad kanda rikkalikku teavet. Payload'ide kasutamine võimaldab teil edastada andmeid redutseerijale dünaamilisemate olekuvärskenduste jaoks. See on äärmiselt kasulik vormide, API-kutsete ja loendite haldamisel.

            
function reducer(state, action) {
  switch (action.type) {
    case 'add_item':
      return { ...state, items: [...state.items, action.payload] };
    case 'remove_item':
      return { ...state, items: state.items.filter(item => item.id !== action.payload) };
    default:
      return state;
  }
}

// Näide tegevuse saatmisest
dispatch({ type: 'add_item', payload: { id: 1, name: 'Item 1' } });
dispatch({ type: 'remove_item', payload: 1 }); // Eemalda element ID-ga 1

2. Mitme redutseerija kasutamine (redutseerijate kompositsioon)

Suuremate rakenduste puhul võib kõigi olekumuutuste haldamine ühes redutseerijas muutuda kohmakaks. Redutseerijate kompositsioon võimaldab teil jagada olekuhalduse väiksemateks ja paremini hallatavateks osadeks. Saate seda saavutada, kombineerides mitu redutseerijat üheks, tipptaseme redutseerijaks.

            
// Eraldiseisvad redutseerijad
function itemReducer(state, action) {
  switch (action.type) {
    case 'add_item':
      return { ...state, items: [...state.items, action.payload] };
    case 'remove_item':
      return { ...state, items: state.items.filter(item => item.id !== action.payload) };
    default:
      return state;
  }
}

function filterReducer(state, action) {
    switch(action.type) {
        case 'SET_FILTER':
            return {...state, filter: action.payload}
        default:
            return state;
    }
}

// Redutseerijate kombineerimine
function combinedReducer(state, action) {
  return {
    items: itemReducer(state.items, action),
    filter: filterReducer(state.filter, action)
  };
}

// Algolek (näide)
const initialState = {
    items: [],
    filter: 'all'
};

function App() {
  const [state, dispatch] = useReducer(combinedReducer, initialState);

  return (
    <div>
      {/* UI komponendid, mis käivitavad tegevusi combinedReducer'is */} 
    </div>
  );
}

3. `useReducer`'i kasutamine koos Context API-ga

Context API pakub viisi andmete edastamiseks läbi komponentide puu, ilma et peaks igal tasandil käsitsi propse edasi andma. Kombineerituna useReducer'iga loob see võimsa ja tõhusa olekuhalduslahenduse, mida peetakse sageli Reduxi kergekaaluliseks alternatiiviks. See muster on erakordselt kasulik globaalse rakenduse oleku haldamiseks.

            
import React, { createContext, useContext, useReducer } from 'react';

// Loome konteksti meie oleku jaoks
const AppContext = createContext();

// Defineerime redutseerija ja algoleku (nagu enne)
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const initialState = { count: 0 };

// Loome provider-komponendi
function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
}

// Loome kohandatud hook'i lihtsaks juurdepääsuks
function useAppState() {
  return useContext(AppContext);
}

function Counter() {
  const { state, dispatch } = useAppState();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Suurenda</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Vähenda</button>
    </div>
  );
}

function App() {
  return (
    <AppProvider>
      <Counter />
    </AppProvider>
  );
}

Siin pakub AppContext oleku ja dispatch-funktsiooni kõigile alamkomponentidele. useAppState kohandatud hook lihtsustab kontekstile juurdepääsu.

4. Thunk'ide implementeerimine (asünkroonsed tegevused)

useReducer on vaikimisi sünkroonne. Paljudes rakendustes on aga vaja teha asünkroonseid toiminguid, näiteks andmete pärimine API-st. Thunkid võimaldavad asünkroonseid tegevusi. Saate seda saavutada, saates tavalise tegevusobjekti asemel funktsiooni (nn "thunk"). Funktsioon saab dispatch-funktsiooni ja saab seejärel saata mitu tegevust vastavalt asünkroonse toimingu tulemusele.

            
function fetchUserData(userId) {
  return async (dispatch) => {
    dispatch({ type: 'request_user' });
    try {
      const response = await fetch(`/api/users/${userId}`);
      const user = await response.json();
      dispatch({ type: 'receive_user', payload: user });
    } catch (error) {
      dispatch({ type: 'request_user_error', payload: error });
    }
  };
}

function reducer(state, action) {
  switch (action.type) {
    case 'request_user':
      return { ...state, loading: true, error: null };
    case 'receive_user':
      return { ...state, loading: false, user: action.payload, error: null };
    case 'request_user_error':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

function UserProfile({ userId }) {
  const [state, dispatch] = useReducer(reducer, { loading: false, user: null, error: null });

  React.useEffect(() => {
    dispatch(fetchUserData(userId));
  }, [userId, dispatch]);

  if (state.loading) return <p>Laen...</p>;
  if (state.error) return <p>Viga: {state.error.message}</p>;
  if (!state.user) return null;

  return (
    <div>
      <h2>{state.user.name}</h2>
      <p>E-post: {state.user.email}</p>
    </div>
  );
}

See näide saadab tegevusi laadimise, õnnestumise ja vea olekute jaoks asünkroonse API-kutse ajal. Keerulisemate stsenaariumide jaoks võib vaja minna vahevara nagu `redux-thunk`; lihtsamate kasutusjuhtude puhul töötab see muster aga väga hästi.

Jõudluse optimeerimise tehnikad

Reacti rakenduste jõudluse optimeerimine on kriitilise tähtsusega, eriti keeruka olekuhaldusega töötamisel. Siin on mõned tehnikad, mida saate useReducer'i kasutamisel rakendada:

1. Dispatch-funktsiooni memoiseerimine

useReducer'ist saadav dispatch-funktsioon tavaliselt renderduste vahel ei muutu, kuid on siiski hea tava seda memoiseerida, kui edastate selle alamkomponentidele, et vältida tarbetuid uuesti renderdusi. Kasutage selleks React.useCallback'i:

            
const [state, dispatch] = useReducer(reducer, initialState);
const memoizedDispatch = React.useCallback(dispatch, []); // Memoizeeri dispatch-funktsioon

See tagab, et dispatch-funktsioon muutub ainult siis, kui sõltuvuste massiivis olevad sõltuvused muutuvad (antud juhul pole neid, seega see ei muutu).

2. Optimeeri redutseerija loogikat

Redutseerija funktsioon käivitatakse iga olekuvärskenduse korral. Veenduge, et teie redutseerija oleks jõudluselt hea, minimeerides ebavajalikke arvutusi ja vältides keerulisi operatsioone redutseerija funktsiooni sees. Kaaluge järgmist:

Muutumatud olekuvärskendused: Uuendage olekut alati muutumatult. Kasutage laialilaotamise operaatorit (...) või Object.assign()'i uute olekuobjektide loomiseks, selle asemel, et muuta olemasolevaid otse. See on oluline muutuste tuvastamiseks ja ootamatu käitumise vältimiseks.
Vältige süvakoopiate tegemist asjatult: Tehke olekuobjektidest süvakoopiaid ainult siis, kui see on absoluutselt vajalik. Pinnapealsed koopiad (kasutades laialilaotamise operaatorit lihtsate objektide jaoks) on tavaliselt piisavad ja on arvutuslikult vähem kulukad.
Laisk lähtestamine: Kui algoleku arvutamine on ressursimahukas, saate oleku lähtestamiseks kasutada funktsiooni. See funktsioon käivitatakse ainult üks kord, esimesel renderdamisel.

            
//Laisk lähtestamine
const [state, dispatch] = useReducer(reducer, initialState, (initialArg) => {
  //Ressursimahukas lähtestamise loogika siin
  return {
    ...initialArg,
    initializedData: 'data'
  }
});

3. Keeruliste arvutuste memoiseerimine `useMemo` abil

Kui teie komponendid teevad olekust sõltuvaid ressursimahukaid arvutusi, kasutage tulemuse memoiseerimiseks React.useMemo'd. See väldib arvutuse uuesti käivitamist, kui sõltuvused ei muutu. See on suurte rakenduste või keerulise loogikaga rakenduste jõudluse jaoks kriitilise tähtsusega.

            
import React, { useReducer, useMemo } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { items: [1, 2, 3, 4, 5] });

  const total = useMemo(() => {
    console.log('Arvutan kogusummat...'); // See logitakse ainult siis, kui sõltuvused muutuvad
    return state.items.reduce((sum, item) => sum + item, 0);
  }, [state.items]); // Sõltuvuste massiiv: arvuta uuesti, kui elemendid muutuvad

  return (
    <div>
      <p>Kogusumma: {total}</p>
      {/* ... muud komponendid ... */}
    </div>
  );
}

Reaalse elu useReducer'i näited

Vaatame mõningaid praktilisi useReducer'i kasutusjuhtumeid, mis illustreerivad selle mitmekülgsust. Need näited on asjakohased arendajatele üle maailma, erinevat tüüpi projektides.

1. Vormi oleku haldamine

Vormid on iga rakenduse tavaline osa. useReducer on suurepärane viis keerulise vormi oleku haldamiseks, sealhulgas mitme sisendvälja, valideerimise ja esitamise loogika jaoks. See muster soodustab hooldatavust ja vähendab korduvat koodi.

            
import React, { useReducer } from 'react';

function formReducer(state, action) {
  switch (action.type) {
    case 'change':
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'submit':
      //Teosta saatmisloogika (API-kutsed jne)
      return state;
    case 'reset':
      return {name: '', email: '', message: ''};
    default:
      return state;
  }
}

function ContactForm() {
  const [state, dispatch] = useReducer(formReducer, { name: '', email: '', message: '' });

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch({type: 'submit'});
    // Näitlik API-kutse (kontseptuaalne)
    // fetch('/api/contact', { method: 'POST', body: JSON.stringify(state) });
    alert('Vorm on (kontseptuaalselt) esitatud!')
    dispatch({type: 'reset'});
  };

  const handleChange = (event) => {
    dispatch({ type: 'change', field: event.target.name, value: event.target.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Nimi:</label>
      <input type="text" id="name" name="name" value={state.name} onChange={handleChange} />

      <label htmlFor="email">E-post:</label>
      <input type="email" id="email" name="email" value={state.email} onChange={handleChange} />

      <label htmlFor="message">Sõnum:</label>
      <textarea id="message" name="message" value={state.message} onChange={handleChange} />

      <button type="submit">Esita</button>
    </form>
  );
}

export default ContactForm;

See näide haldab tõhusalt vormiväljade olekut ning tegeleb nii sisendimuudatuste kui ka vormi esitamisega. Pange tähele `reset` tegevust, et vorm pärast edukat esitamist lähtestada. See on lühike ja kergesti mõistetav implementatsioon.

2. Ostukorvi implementeerimine

E-kaubanduse rakendused, mis on ülemaailmselt populaarsed, hõlmavad sageli ostukorvi haldamist. useReducer sobib suurepäraselt ostukorvis olevate toodete lisamise, eemaldamise ja uuendamisega seotud keerukuste haldamiseks.

            
function cartReducer(state, action) {
  switch (action.type) {
    case 'add_item':
      const existingItemIndex = state.items.findIndex(item => item.id === action.payload.id);
      if (existingItemIndex !== -1) {
        // Kui toode on olemas, suurenda kogust
        const updatedItems = [...state.items];
        updatedItems[existingItemIndex] = { ...updatedItems[existingItemIndex], quantity: updatedItems[existingItemIndex].quantity + 1 };
        return { ...state, items: updatedItems };
      }
      return { ...state, items: [...state.items, { ...action.payload, quantity: 1 }] };
    case 'remove_item':
      return { ...state, items: state.items.filter(item => item.id !== action.payload) };
    case 'update_quantity':
      const itemIndex = state.items.findIndex(item => item.id === action.payload.id);
      if (itemIndex !== -1) {
        const updatedItems = [...state.items];
        updatedItems[itemIndex] = { ...updatedItems[itemIndex], quantity: action.payload.quantity };
        return { ...state, items: updatedItems };
      }
      return state;
    case 'clear_cart':
      return { ...state, items: [] };
    default:
      return state;
  }
}

function ShoppingCart() {
  const [state, dispatch] = React.useReducer(cartReducer, { items: [] });

  const handleAddItem = (item) => {
    dispatch({ type: 'add_item', payload: item });
  };

  const handleRemoveItem = (itemId) => {
    dispatch({ type: 'remove_item', payload: itemId });
  };

  const handleUpdateQuantity = (itemId, quantity) => {
    dispatch({ type: 'update_quantity', payload: {id: itemId, quantity} });
  }

  // Arvuta kogusumma
  const total = React.useMemo(() => {
    return state.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }, [state.items]);

  return (
    <div>
      <h2>Ostukorv</h2>
      {state.items.length === 0 && <p>Teie ostukorv on tühi.</p>}
      <ul>
        {state.items.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price} x {item.quantity} = ${item.price * item.quantity}
            <button onClick={() => handleRemoveItem(item.id)}>Eemalda</button>
            <input type="number" min="1" value={item.quantity} onChange={(e) => handleUpdateQuantity(item.id, parseInt(e.target.value))} />
          </li>
        ))}
      </ul>
      <p>Kokku: ${total}</p>
      <button onClick={() => dispatch({ type: 'clear_cart' })}>Tühjenda ostukorv</button>
      {/* ... muud komponendid ... */}
    </div>
  );
}

Ostukorvi redutseerija haldab toodete lisamist, eemaldamist ja koguste uuendamist. React.useMemo hook'i kasutatakse koguhinna tõhusaks arvutamiseks. See on tavaline ja praktiline näide, olenemata kasutaja geograafilisest asukohast.

3. Lihtsa lüliti implementeerimine püsiva olekuga

See näide demonstreerib, kuidas kombineerida useReducer'it lokaalse salvestusruumiga püsiva oleku saavutamiseks. Kasutajad eeldavad sageli, et nende seaded jäetakse meelde. See muster kasutab brauseri lokaalset salvestusruumi lüliti oleku salvestamiseks isegi pärast lehe värskendamist. See sobib hästi teemade, kasutajaeelistuste ja muu jaoks.

            
import React, { useReducer, useEffect } from 'react';

// Redutseerija funktsioon
function toggleReducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { isOn: !state.isOn };
    default:
      return state;
  }
}

function ToggleWithPersistence() {
  // Hangi algolek lokaalsest salvestusruumist või vaikeväärtusena false
  const [state, dispatch] = useReducer(toggleReducer, { isOn: JSON.parse(localStorage.getItem('toggleState')) || false });

  // Kasuta useEffect'i, et salvestada olek lokaalsesse salvestusruumi iga kord, kui see muutub
  useEffect(() => {
    localStorage.setItem('toggleState', JSON.stringify(state.isOn));
  }, [state.isOn]);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.isOn ? 'Sees' : 'Väljas'}
      </button>
      <p>Lüliti on: {state.isOn ? 'Sees' : 'Väljas'}</p>
    </div>
  );
}

export default ToggleWithPersistence;

See lihtne komponent lülitab olekut ja salvestab selle `localStorage`'isse. useEffect hook tagab, et olek salvestatakse iga värskenduse korral. See muster on võimas tööriist kasutaja seadete säilitamiseks seansside vahel, mis on ülemaailmselt oluline.

Millal eelistada useReducer'it useState'ile

Otsustamine useReducer'i ja useState'i vahel sõltub teie oleku keerukusest ja sellest, kuidas see muutub. Siin on juhend, mis aitab teil teha õige valiku:

Valige useReducer, kui:

Teie olekuloogika on keeruline ja sisaldab mitut alamväärtust.
Järgmine olek sõltub eelmisest olekust.
Peate haldama olekuvärskendusi, mis hõlmavad arvukalt tegevusi.
Soovite tsentraliseerida olekuloogikat ja muuta silumise lihtsamaks.
Eeldate, et peate oma rakendust hiljem skaleerima või olekuhaldust ümber tegema.

Valige useState, kui:

Teie olek on lihtne ja esindab ühte väärtust.
Olekuvärskendused on lihtsad ja ei sõltu eelmisest olekust.
Teil on suhteliselt vähe olekuvärskendusi.
Soovite kiiret ja lihtsat lahendust põhiliseks olekuhalduseks.

Üldreeglina, kui leiate end kirjutamast keerulist loogikat oma useState'i värskendusfunktsioonides, on see hea märk sellest, et useReducer võib olla parem valik. useReducer hook annab keerukate olekumuutustega olukordades sageli tulemuseks puhtama ja hooldatavama koodi. See võib aidata ka teie koodi ühiktestimist lihtsustada, kuna see pakub järjepidevat mehhanismi olekuvärskenduste teostamiseks.

Parimad tavad ja kaalutlused

Et useReducer'ist maksimumi võtta, pidage silmas järgmisi parimaid tavasid ja kaalutlusi:

Organiseerige tegevused: Defineerige oma tegevuste tüübid konstantidena (nt `const INCREMENT = 'increment';`), et vältida trükivigu ja muuta kood hooldatavamaks. Kaaluge tegevuste looja mustri kasutamist tegevuste loomise kapseldamiseks.
Tüübikontroll: Suuremate projektide puhul kaaluge TypeScripti kasutamist oma oleku, tegevuste ja redutseerija funktsiooni tüüpide määramiseks. See aitab vältida vigu ning parandada koodi loetavust ja hooldatavust.
Testimine: Kirjutage oma redutseerija funktsioonidele ühiktestid, et tagada nende korrektne käitumine ja erinevate tegevusstsenaariumite käsitlemine. See on ülioluline tagamaks, et teie olekuvärskendused on prognoositavad ja usaldusväärsed.
Jõudluse jälgimine: Kasutage brauseri arendaja tööriistu (nagu React DevTools) või jõudluse jälgimise tööriistu, et jälgida oma komponentide jõudlust ja tuvastada olekuvärskendustega seotud kitsaskohti.
Oleku kuju disain: Kujundage hoolikalt oma oleku kuju, et vältida tarbetut pesastamist või keerukust. Hästi struktureeritud olek muudab selle mõistmise ja haldamise lihtsamaks.
Dokumentatsioon: Dokumenteerige oma redutseerija funktsioonid ja tegevuste tüübid selgelt, eriti koostööprojektides. See aitab teistel arendajatel teie koodi mõista ja muudab selle hooldamise lihtsamaks.
Kaaluge alternatiive (Redux, Zustand jne): Väga suurte rakenduste puhul, millel on äärmiselt keerulised olekunõuded, või kui teie meeskond on juba Reduxiga tuttav, võiksite kaaluda põhjalikuma olekuhaldusteegi kasutamist. Kuid useReducer ja Context API pakuvad võimsat lahendust ilma väliste teekide lisatud keerukuseta.

Kokkuvõte

Reacti useReducer hook on võimas ja paindlik tööriist keeruka oleku haldamiseks teie rakendustes. Mõistes selle põhitõdesid, vallates täiustatud mustreid ja rakendades jõudluse optimeerimise tehnikaid, saate luua robustsemaid, hooldatavamaid ja tõhusamaid Reacti komponente. Pidage meeles, et kohandage oma lähenemist vastavalt oma projekti vajadustele. Alates keeruliste vormide haldamisest kuni ostukorvide loomise ja püsivate eelistuste käsitlemiseni annab useReducer arendajatele üle maailma võimaluse luua keerukaid ja kasutajasõbralikke liideseid. Süvenedes Reacti arendusmaailma, osutub useReducer'i valdamine teie tööriistakastis hindamatuks varaks. Pidage meeles, et alati tuleb eelistada koodi selgust ja hooldatavust, et tagada teie rakenduste lihtne mõistmine ja arendamine aja jooksul.